<template>
  <div class="con">
    <div class="contbox6_10" v-if="true">
      <p class="titlelist6_10">
        商城管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>商品列表
      </p>

      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="listQuery" :model="listQuery" label-width="80px">
            <el-row style="float: left">
              <el-form-item label="品牌名称">
                <el-select
                  class="appointVip"
                  v-model="listQuery.channelUid"
                  placeholder="请选择品牌"
                  @change="pinChange"
                >
                  <el-option
                    v-for="(val, index) in paizi"
                    :label="val.channelName"
                    :value="val.uid"
                    :key="index"
                  ></el-option
                ></el-select>
              </el-form-item>
              <el-form-item label="商品类型">
                <el-cascader
                  placeholder="请选择商品类型"
                  :disabled="sign"
                  v-model="listQuery.productType"
                  :options="options"
                  :props="{ emitPath: false }"
                  @change="productList"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-input
                  placeholder="请输入商品名称"
                  v-model="listQuery.productName"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="listQuery.startDate"
                ></el-date-picker>
                <div class="times">-</div>
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="listQuery.endDate"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-form-item label="状态">
                <el-select
                  v-model="listQuery.status"
                  placeholder="请选择"
                  class="filter-item"
                >
                  <el-option
                    v-for="item in orgType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item> -->
            </el-row>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            icon="search"
            v-if="isAuth('commoditySearch')"
            @click="handleSelectLists"
            >搜索</el-button
          >
          <el-button
            v-if="isAuth('commodityReset')"
            @click="resetTheSearch"
            type=""
            icon="edit"
            >重置</el-button
          >
          <!-- 商品列表 -->
          <el-button
            type="primary"
            style="margin-left: 40px"
            class="butt"
            v-if="isAuth('createProduct')"
            @click="createWindow(0, 1)"
            icon="el-icon-plus"
            >添加商品</el-button
          >
        </div>
        <el-table
          :data="list"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
          style="margin-top: 24px !important"
        >
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="品牌名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.channelName }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column  show-overflow-tooltip min-width="200" label="机构名称">
            <template slot-scope="scope">
              <span>{{ scope.row.officeName }}</span>
            </template>
          </el-table-column> -->
          <el-table-column min-width="150" label="商品类型">
            <template slot-scope="scope">
              <span>{{ scope.row.channelType }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="商品型号"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.productNo }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="150"
            label="商品名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.productName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            min-width="100"
            label="商品售价（元）"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.unitAmt }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
              prop=""
              min-width="120"
              label="上架数量控制"
            ><template slot-scope="scope">
                <span v-if="scope.row.upCntCtl == 0">保持一致</span>
                <span v-if="scope.row.upCntCtl == 1">不保持一致</span>
              </template>
            </el-table-column> -->
          <el-table-column min-width="160" label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createDate }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="isAuth('commodityEditor')"
                @click="createWindow(scope.row, 3)"
                >修改</el-button
              >
              <el-button
                type="text"
                v-if="isAuth('commodityDetails')"
                @click="createWindow(scope.row, 2)"
                >查看</el-button
              >
              <el-button type="text" @click="upMove(scope.row, 0)"
                >上移</el-button
              >
              <el-button type="text" @click="upMove(scope.row, 1)"
                >下移</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="font-size: 16px; margin-top: 30px">
          <div v-show="!listLoading" class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="listQuery.page"
              :page-sizes="[20, 50, 100]"
              :page-size="listQuery.number"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
import Tree from "../tree/index";

var unitAmts = (rule, value, callback) => {
  var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if (value) {
    if (reg.test(value)) {
      return callback();
    } else {
      return callback(new Error("请输入正确的金额"));
    }
  } else {
    return callback(new Error("请输入金额"));
  }
};
import axios from "axios";
import https from "../../plugins/https";
import { CompareDate } from "../../assets/js/commion";
export default {
  name: "commodityManage",
  data() {
    return {
      dataes: null,
      list: null,
      signs: localStorage.getItem("jurisdiction"),
      total: null,
      listLoading: true,
      checkedAll: false,
      showType: false,
      officeName: "",
      listQuery: {
        page: 1,
        number: 20,
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        channelName: undefined, //	品牌名称
        officeType: undefined, //	机构类型
        officeName: undefined, //	机构名称
        phone: undefined, //	手机号
        channelUid: undefined, //	品牌Uid
        productName: undefined, //	产品名称
        productType: undefined, //	产品类型
        productNo: undefined, //	产品型号
        status: undefined, //	状态
        startDate: "", //开始时间
        endDate: "", //	结束时间
        channelType: undefined,
        officeUid: "", //uid
      },
      move: {
        uid: "",
        sortType: "",
      },
      numeration: "1",
      selectTime: [],
      dialogFormBrandList: false, //创建品牌页面
      brandListTitle: "",
      multipleSelection: [], //选中的数组
      channelNameList: [],
      channelTypeList: [],
      options: [],
      organizationLsit: [
        { id: "0", label: "OEM代理" },
        { id: "1", label: "普通代理" },
      ],
      orgType: [
        { id: "", label: "全部" },
        { id: "0", label: "开通" },
        { id: "1", label: "停用" },
      ],
      operaTypeStatus: false,
    };
  },
  created() {
    // 獲取數據
    https.shopLister().then((res) => {
      if (res.data.code == "0000") {
        this.options = res.data.data;
      } else {
        layer.open({
          content: d.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      }
    });
    var _this = this;
    _this
      .axios({
        method: "post",
        url: "/api/brand/queryChannelNameList",
        data: { oemUid: localStorage.getItem("uid") },
      })
      .then(function (d) {
        if (d.data.code == "0000") {
          _this.paizi = d.data.data;
          /*  _this.form.toOfficeUid = d.data.oemuid;*/
        } else {
          layer.open({
            content: d.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
        }
      })
      .catch(function (error) {});
    _this.handleSelectList();
  },

  methods: {
    // 上移
    upMove(val, type) {
      console.log(val);
      this.move.uid = val.uid;
      this.move.sortType = Number(type);
      https.shopListMove(this.move).then((res) => {
        if (res.data.code == "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //2秒后自动关闭
          });
          this.handleSelectList();
        } else {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //2秒后自动关闭
          });
        }
      });
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束
    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectList() {
      let that = this;
      that.listLoading = true;
      that.list = [];
      that
        .axios({
          //axios请求
          method: "POST",
          url: "api/product/list",
          headers: { "Content-Type": "application/json;charset=utf-8" },
          data: that.listQuery,
        })
        .then((res) => {
          if (res.data.code == "0000") {
            that.list = res.data.data;
            that.total = res.data.total;
            that.listLoading = false;
          } else {
            that.listLoading = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2, //2秒后自动关闭
            });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      this.listQuery.number = val;
      this.listQuery.page = 1;
      this.handleSelectList();
    },

    // 搜索
    handleSelectLists() {
      if (this.listQuery.startDate != "" && this.listQuery.endDate != "") {
        if (CompareDate(this.listQuery.startDate, this.listQuery.endDate)) {
          this.listQuery.page = 1;
          this.handleSelectList();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 1, //1秒后自动关闭
          });
        }
      } else {
        this.listQuery.page = 1;
        this.handleSelectList();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.handleSelectList();
    },
    /**
     * @author: Zhu Liangfu
     * @Description:新建/修改/查看商品
     * @date:2020/6/10   20:50
     */
    createWindow(val, status) {
      if (status == 2) {
        this.$router.push({
          name: "commodity",
          query: {
            productUid: val.uid,
            type: 2,
            titles: "查看",
          },
        });
      } else if (status == 3) {
        this.$router.push({
          name: "commodity",
          query: {
            productUid: val.uid,
            type: 1,
            titles: "修改",
          },
        });
      } else {
        this.$router.push({
          name: "commodity",
          query: {
            type: 1,
            titles: "添加",
          },
        });
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.officeName = "";
      that.listQuery = {
        page: 1,
        number: 20,
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid
        officeUid: "",
        channelName: undefined, //	品牌名称
        officeType: undefined, //	机构类型
        officeName: undefined, //	机构名称
        phone: undefined, //	手机号
        channelUid: undefined, //	品牌Uid
        productName: undefined, //	产品名称
        productType: undefined, //	产品类型
        productNo: undefined, //	产品型号
        status: undefined, //	状态
        startDate: undefined, //开始时间
        endDate: undefined, //	结束时间
        channelType: undefined,
      };
      that.selectTime = [];
      // that.list = null;
      that.handleSelectList();
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.imageInfo {
  width: 270px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 10px 10px 10px;
}
.imageInfos {
  min-width: 150px;
  min-height: 100px;
  max-width: 150px;
  max-height: 270px;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 10px 10px 10px;
}

/deep/ .el-image__inner {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.buttonText {
  height: 270px;
  width: 150px;
  display: none;
  text-decoration: none;
  font-size: 25px;
}

.iconText {
  position: absolute;
  top: -55px;
  right: 10px;
}

.btn {
  position: absolute;
  bottom: -30px;
  left: 35%;
  right: 50%;
}
.imageInfos:hover .buttonText {
  display: block;
  position: absolute;
  color: #ff3428;
  /* width: 270px; */
  z-index: 2;
  height: 150px;
  line-height: 150px;
  background: #ffffff;
  filter: alpha(opacity=60);
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.imageInfo:hover .buttonText {
  display: block;
  position: absolute;
  color: #ff3428;
  width: 270px;
  z-index: 2;
  height: 150px;
  line-height: 150px;
  background: #ffffff;
  filter: alpha(opacity=60);
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.times {
  display: inline-block;
  width: 20px;
  text-align: center;
}
/deep/ .el-textarea__inner {
  width: 300px !important;
}
/deep/ .el-dialog {
  width: 600px !important;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
/deep/ .el-cascader {
  line-height: 32px;
}
.sousuojg6_10 {
  width: 100%;
}
</style>
